<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业管理 - 港口无人化协同作业平台</title>
    <base href="/">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="/task-management.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">港口无人化协同作业平台</div>
            <ul class="nav-links">
                <li><a href="/index.html">首页</a></li>
                <li><a href="/page2.html" class="active">作业管理</a></li>
                <li><a href="page3.html">设备监控</a></li>
                <li><a href="page4.html">数据分析</a></li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 作业概览 -->
            <div class="overview-cards">
                <div class="card">
                    <h3>今日作业任务</h3>
                    <div class="card-content">
                        <div class="task-info">
                            <span class="number" id="totalTasks">0</span>
                            <span class="unit">个</span>
                        </div>
                        <div class="task-detail">
                            <span class="status running">进行中: <span id="runningTasks">0</span></span>
                            <span class="status waiting">待分配: <span id="waitingTasks">0</span></span>
                            <span class="status completed">已完成: <span id="completedTasks">0</span></span>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h3>作业效率</h3>
                    <div class="card-content">
                        <div class="efficiency-stats">
                            <div class="stat-item">
                                <span class="stat-label">岸桥效率</span>
                                <span class="stat-value" id="qcEfficiency">95%</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">龙门吊效率</span>
                                <span class="stat-value" id="rtgEfficiency">88%</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">AGV效率</span>
                                <span class="stat-value" id="agvEfficiency">92%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h3>设备利用率</h3>
                    <div class="card-content">
                        <div class="utilization-stats">
                            <div class="stat-item">
                                <span class="stat-label">岸桥利用率</span>
                                <span class="stat-value" id="qcUtilization">85%</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">龙门吊利用率</span>
                                <span class="stat-value" id="rtgUtilization">78%</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">AGV利用率</span>
                                <span class="stat-value" id="agvUtilization">82%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <h3>作业进度</h3>
                    <div class="card-content">
                        <div class="progress-stats">
                            <div class="stat-item">
                                <span class="stat-label">装船进度</span>
                                <span class="stat-value" id="loadingProgress">75%</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">卸船进度</span>
                                <span class="stat-value" id="unloadingProgress">60%</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">转运进度</span>
                                <span class="stat-value" id="transferProgress">45%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 作业管理区域 -->
            <div class="task-management-container">
                <!-- 作业列表 -->
                <div class="task-list">
                    <div class="list-header">
                        <h3>作业任务列表</h3>
                        <div class="task-controls">
                            <button class="btn-primary" id="addTaskBtn">新建任务</button>
                            <select id="taskStatusFilter">
                                <option value="all">全部状态</option>
                                <option value="running">进行中</option>
                                <option value="waiting">待分配</option>
                                <option value="completed">已完成</option>
                            </select>
                            <select id="taskTypeFilter">
                                <option value="all">全部类型</option>
                                <option value="loading">装船</option>
                                <option value="unloading">卸船</option>
                                <option value="transfer">转运</option>
                            </select>
                        </div>
                    </div>
                    <div class="task-items" id="taskList">
                        <!-- 任务列表将通过JavaScript动态填充 -->
                    </div>
                </div>

                <!-- 任务详情 -->
                <div class="task-detail">
                    <div class="detail-header">
                        <h3>任务详情</h3>
                        <button class="close-detail" id="closeDetail">×</button>
                    </div>
                    <div class="detail-content">
                        <div class="task-info">
                            <div class="info-group">
                                <label>任务编号：</label>
                                <span id="taskId">-</span>
                            </div>
                            <div class="info-group">
                                <label>任务类型：</label>
                                <span id="taskType">-</span>
                            </div>
                            <div class="info-group">
                                <label>任务状态：</label>
                                <span id="taskStatus">-</span>
                            </div>
                            <div class="info-group">
                                <label>开始时间：</label>
                                <span id="taskStartTime">-</span>
                            </div>
                            <div class="info-group">
                                <label>预计完成：</label>
                                <span id="taskEndTime">-</span>
                            </div>
                            <div class="info-group">
                                <label>作业进度：</label>
                                <div class="progress-bar">
                                    <div class="progress" id="taskProgress"></div>
                                </div>
                                <span id="progressText">0%</span>
                            </div>
                        </div>
                        <div class="task-devices">
                            <h4>参与设备</h4>
                            <div class="device-list" id="taskDevices">
                                <!-- 设备列表将通过JavaScript动态填充 -->
                            </div>
                        </div>
                        <div class="task-actions">
                            <button class="btn-secondary" id="pauseTaskBtn">暂停任务</button>
                            <button class="btn-primary" id="resumeTaskBtn">恢复任务</button>
                            <button class="btn-danger" id="cancelTaskBtn">取消任务</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 新建任务模态框 -->
    <div class="modal" id="newTaskModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新建任务</h3>
                <button class="close-modal">×</button>
            </div>
            <div class="modal-body">
                <form id="newTaskForm">
                    <div class="form-group">
                        <label>任务类型</label>
                        <select name="taskType" required>
                            <option value="loading">装船</option>
                            <option value="unloading">卸船</option>
                            <option value="transfer">转运</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>船舶编号</label>
                        <input type="text" name="vesselId" required>
                    </div>
                    <div class="form-group">
                        <label>集装箱数量</label>
                        <input type="number" name="containerCount" required>
                    </div>
                    <div class="form-group">
                        <label>优先级</label>
                        <select name="priority" required>
                            <option value="high">高</option>
                            <option value="medium">中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <textarea name="remarks"></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn-secondary" id="cancelNewTask">取消</button>
                        <button type="submit" class="btn-primary">创建任务</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="task-data.js"></script>
    <script src="task-management.js"></script>
</body>

</html>